import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    user: {
      name: "",
      number: "",
      ignore: true,
    },
    data: {
      list: null,
      content: null,
      show: "",
    },
    config: {
      letters: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "h",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
      ],
    },
    style: {
      containerWidth: "",
      modelWidth: "",
    },
  },
  mutations: {
    setModelWidth(state, payload) {
      state.style.modelWidth = payload;
    },
    setContainerWidth(state, payload) {
      state.style.containerWidth = payload;
    },
    // set list
    setList(state, payload) {
      state.data.list = payload;
    },
    // set content
    setContent(state, payload) {
      state.data.content = payload;
      // window.console.log(state.data.content);
    },
    setShow(state, payload) {
      state.data.show = payload;
    },
  },
  actions: {
    // load list
    loadList(context) {
      axios
        .get(`./data/list.json?d=${new Date().getTime()}`)
        .then((response) => {
          context.commit("setList", response.data);
        });
    },
    // load full list
    loadFullList(context) {
      context.commit("setShow","full");
      axios
        .get(`./data/listFull.json?d=${new Date().getTime()}`)
        .then((response) => {
          context.commit("setList", response.data);
        });
    },
    // load full list
    loadExtraList(context) {
      context.commit("setShow","extra");
      axios
        .get(`./data/listExtra.json?d=${new Date().getTime()}`)
        .then((response) => {
          context.commit("setList", response.data);
        });
    },
    // load content
    loadContent(context, payload) {
      let path = `./data/content/${payload}.json?d=${new Date().getTime()}`;
      axios.get(path).then((response) => {
        context.commit("setContent", response.data);
        // window.console.log(response.data);
      });
    },
  },
  modules: {},
});
